<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>吉林师范大学新生基本信息核查表</title>
    <meta name="approvalStatus" th:content="${approvalStatus}">
    <meta name="approvalRemark" th:content="${approvalRemark}">
    <meta name="outsideType" th:content="${outsideType}">
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
            width: 100vw;
            height: 100%;
            box-sizing: border-box;
            font-family: 'SimSun', sans-serif;
        }
        .htStyle {
            padding: 0 160px
        }
        .heightStyle {
            /*height: 200px*/
        }
        .imageStyle2 {
            width:150px;
            /*height: 200px;*/
        }
        .button-container {
            display: flex;
            justify-content: flex-end; /* 右对齐 */
        }
        /* 全局滚动条样式（适配图片风格） */
        ::-webkit-scrollbar {
            width: 8px;                  /* 调整为更纤细的浅灰条 */
            background: transparent;     /* 轨道透明以融入背景 */
        }

        ::-webkit-scrollbar-thumb {
            background: #dee2e6;          /* 浅灰与表格边框同色 */
            border: 2px solid #ffffff;    /* 白边增强对比 */
            border-radius: 4px;           /* 圆角与表格按钮统一 */
            transition: all 0.3s ease;
        }

        /* 悬停状态（保留原功能提示） */
        ::-webkit-scrollbar-thumb:hover {
            background: #ced4da;          /* 加深10%的灰色 */
            transform: scaleX(1.1);
        }

        /* 激活状态（呼应黄按钮） */
        ::-webkit-scrollbar-thumb:active {
            background: #ffd43b;          /* 黄色与预览按钮呼应 */
        }

        /* Firefox兼容方案 */
        * {
            scrollbar-width: thin;
            scrollbar-color: #dee2e6 #fff; /* 浅灰滑块+白色轨道 */
        }
        .borderStyle {
            border-left: 2px solid #000 !important;
        }
        .borderBotton {
            border-bottom: 2px solid #000 !important;
        }
        .sizeStyle {
            text-align: center;
            font-size: 26px;
            letter-spacing: 2px;
            font-weight: 600;
        }
        .spacing-table {
            border-collapse: separate;   /* 必须设为 separate */
            border-spacing: 0;          /* 单元格间距归零 */
            border: none;
        }

        /* 精准控制边框 */
        .spacing-table td,
        .spacing-table th {
            border-bottom: none;
            border-left: none;
        }
        .textStyle {
            margin: auto;
            width: 60%;
            margin-top: 10px;
            line-height: 30px
        }

        /* 隐藏最后一个行的底部边框 */
        .spacing-table tr:last-child td,
        .spacing-table tr:last-child th {
            border-bottom: none;
        }
        #box {
            width: 100%;
            min-width: 800px;
            transform: scale(0.9);
            transform-origin: top center;
        }

        table {
            border: 1px solid #000;
            border-collapse: collapse;
            width: 60%;
            margin: auto;
            table-layout: fixed;
        }

        th,
        td {
            padding: 16px 10px;
            word-break: break-all;
            border: 2px solid #000;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
        }

        span {
            padding: 0 5px;
        }


        @media print {
            body {
                transform: scale(1);
                min-width: auto;
            }
            #box {
                min-width: auto;
                transform: none;
            }
            #printButton {
                display: none; /* 确保打印时不显示 */
            }
        }
    </style>
</head>

<body>
<div id="box">
    <h1 class="sizeStyle">吉林师范大学本科生学籍表</h1>

    <table class="spacing-table" style="margin-top: 20px">
        <!-- 左侧原始列 -->
        <tr>
            <th style="width: 15%;" class="borderStyle">所在单位（院所）</th>
            <td th:text="${departmentName}" style="width: 22%;"></td>
            <th style="width: 15%">性&ensp;&ensp;&ensp;&ensp;名</th>
            <td th:text="${name}" style="width: 22%"></td>
            <th style="width: 15%">性&ensp;&ensp;&ensp;&ensp;别</th>
            <td th:text="${gender}" style="width: 22%"></td>


            <th rowspan="6" style="vertical-align: middle;width: 24%">
                <!-- 有照片时显示图片 -->
                <div class="button-container" th:if="${photo}">
                    <img
                            class="imageStyle2"
                            th:if="${photo}"
                            th:src="${photo}"
                            style="width:100%;vertical-align:middle;"
                            alt="证件照"
                    >
                </div>
                <!-- 无照片时显示文字 -->
                <span th:unless="${photo}">2寸照片</span></th>
        </tr>

        <tr>
            <th style="width: 18%" class="borderStyle">学&ensp;&ensp;&ensp;&ensp;号</th>
            <td th:text="${studentId}" style="width: 26%"></td>

            <th style="width: 18%">出生年月</th>
            <td th:text="${birthDate}" style="width: 26%"></td>

            <th style="width: 18%">民&ensp;&ensp;&ensp;&ensp;族</th>
            <td th:text="${ethnicity}" style="width: 26%"></td>



        </tr>

        <tr>
            <th style="width: 26%;" class="borderStyle">籍&ensp;&ensp;&ensp;&ensp;贯</th>
            <td th:text="${hometown}"></td>


            <th style="width: 26%;">政治面貌</th>
            <td th:text="${politicalAffiliation}"></td>

            <th style="width: 26%;">婚&ensp;&ensp;&ensp;&ensp;否</th>
            <td th:text="${maritalStatus}"></td>

        </tr>

        <tr>

            <th style="width: 26%;" class="borderStyle">专业名称</th>
            <td colspan="2" th:text="${academicMajor}"></td>

            <th style="width: 26%;">学科门类</th>
            <td colspan="2" th:text="${disciplineCategory}"></td>
        </tr>


        <tr>
            <th style="width: 26%;" class="borderStyle">录取类别</th>
            <td colspan="2" th:text="${admissionCategory}"></td>

            <th style="width: 26%;">身份证号</th>
            <td colspan="4" th:text="${idCardNumber}"></td>
        </tr>


        <tr>
            <th style="width: 26%;" class="borderStyle">入学前学历</th>
            <td colspan="2" th:text="${previousEducation}"></td>

            <th style="width: 26%;">入学前学校及专业</th>
            <td colspan="4" th:text="${previousSchoolMajor}"></td>
        </tr>

        <tr>
            <th style="width: 26%;" class="borderStyle">微信号</th>
            <td colspan="2" th:text="${wechatId}"></td>

            <th style="width: 26%;">有何特长</th>
            <td colspan="4" th:text="${specialties}"></td>
        </tr>

        <tr>
            <th style="width: 26%;" class="borderStyle">QQ号</th>
            <td colspan="2" th:text="${qqId}"></td>

            <th style="width: 26%;">本人邮箱</th>
            <td colspan="4" th:text="${email}"></td>
        </tr>

        <tr>
            <th style="width: 26%;" class="borderStyle">本人手机</th>
            <td colspan="2" th:text="${contactNumber}"></td>

            <th style="width: 26%;">寝室号</th>
            <td colspan="4" th:text="${''}"></td>
        </tr>

        <tr>
            <th style="width: 26%;" class="borderStyle">家庭详细地址</th>
            <td colspan="6" th:text="${familyDetailedAddress}"></td>
        </tr>
    </table>


    <table class="spacing-table">
        <tr>
            <th style="width: 19%;" class="borderStyle">本人简历（从高中起）</th>
        </tr>
    </table>

    <table class="spacing-table">


        <tr th:each="resume, iterStat : ${resumeInfo}">
            <th style="width: 19%;" class="borderStyle heightStyle"
                th:text="${resume.personalResume1StartDate} ?: '&ensp;'"></th>
            <th style="width: 19%;"
                th:text="${resume.personalResume1Institution} ?: '&ensp;'"></th>
            <th style="width: 19%;"
                th:text="${resume.certifier} ?: '&ensp;'"></th>
        </tr>


    </table>





    <table class="spacing-table">
        <tr>
            <th style="width: 19%;" class="borderStyle">本家庭主要成员及主要社会关系、工作单位、职务、联系电话</th>
        </tr>

    </table>
    <table class="spacing-table borderBotton">
        <tr th:each="member, iterStat : ${familyInfo}">
            <th style="width: 19%;" class="borderStyle"
                th:text="${member.familyMember1Name} ?: '&ensp;'"></th>
            <th style="width: 19%;"
                th:text="${member.familyMember1Relationship} ?: '&ensp;'"></th>
            <xingmth style="width: 19%;"
                th:text="${member.familyMember1WorkUnit} ?: '&ensp;'"></xingmth>
            <th style="width: 19%;"
                th:text="${member.familyMember1Position} ?: '&ensp;'"></th>
            <th style="width: 19%;"
                th:text="${member.familyMember1Phone} ?: '&ensp;'"></th>
        </tr>
    </table>



    <p class="textStyle">注：填写字迹工整清除</p>
</div>
<!--<button id ="printButton" onclick="window.print()"  style="position: fixed; bottom: 20px; right: 20px; padding: 10px 20px; font-size: 16px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer;">打印报告</button>-->
</body>

</html>
